<template>
    <div>
        <!-- 小球 -->
        <!-- 注意：钩子函数动画，这些钩子函数，都是通过事件绑定机制，绑定到transition元素上的 -->

        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
        <!-- 轮播图 -->
        <div class="mui-card">

            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotu="lunbotu" :imgname="'src'"></swiper>
                </div>
            </div>

        </div>
        <!-- 购买 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：
                        <span><del>￥{{goodsinfo.market_price}}</del></span>
                        销售价：
                        <span style="font-size:16px;font-weight:bold;color:red">￥{{goodsinfo.sell_price}}</span>
                    </p>
                    <!-- 由于goodsinfo事通过ajax动态获取的，但是，ajax事异步请求的，需要消耗时间 -->
                    <!-- 因此，可能会导致这样的情况：nobox组件咸鱼Ajax渲染出来，此时，组件被渲染的时候，goodsinfo为空对象，因此，传递到子组件中的stock_quantity是undefined -->
                    <p>购买数量：<nobox :max="goodsinfo.stock_quantity" @func="getSelectCount"></nobox>
                    </p>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>
                </div>
            </div>

        </div>
        <!-- 详情 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品编号：{{goodsinfo.goods_no}}</p>
                    <p>库存情况：{{goodsinfo.stock_quantity}}件</p>
                    <p>发布时间：{{goodsinfo.add_time | dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer btnarea">
                <!-- 元素导航：使用router-link元素实现的导航 -->
                <!-- <router-link :to="'/home/goodsdesc/' + goodsinfo.id" >
                <mt-button type="primary" size="large" plain style="margin-bottom:15px">图文介绍</mt-button>
                </router-link> -->

                <!-- 使用编程式导航，来实现路由页面的跳转
               编程式导航：就是使用js的代码的方式，来实现路由的跳转
                -->
                <mt-button type="primary" size="large" plain style="margin-bottom:15px" @click="goDesc">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    import swiper from "../public/Swiper.vue";
    import nobox from "../public/goodsinfo_no.vue"
    import {mapMutations} from "vuex"

    export default {
        data() {
            return {
                lunbotu: [],
                goodsinfo: {},
                flag: false, //小球的显示隐藏状态
                selectedCount:1 //默认的商品数量
            }
        },
        created() {
            this.getlunbotu(),
                this.getgoodsinfo()
        },
        methods: {
            ...mapMutations(["addToCar"]),
            async getlunbotu() {
                const {
                    data
                } = await this.$http.get('/api/getthumimages/' + this.id);
                if (data.status === 0) return (this.lunbotu = data.message);
            },
            async getgoodsinfo() {
                const {
                    data
                } = await this.$http.get('/api/goods/getinfo/' + this.id);
                if (data.status === 0) return (this.goodsinfo = data.message[0]);
            },
            goDesc() {
                // 编程式导航，点击按钮，跳转到商品的详情页面
                this.$router.push('/home/goodsdesc/' + this.goodsinfo.id);
            },
            goComment() {
                //点击按钮，跳转到评论页面
                this.$router.push('/home/GoodsComment/' + this.goodsinfo.id)
            },
            addToCart() {
                //点击加入购物车
                this.flag = !this.flag;
                //调用mutationsf 中的addToCar方法
                // this.$store.commit("addToCar",{
                //     id:this.id,
                //     count:this.selectedCount
                // })

                //直接调用mapMutations中映射出来的方法
                this.addToCar({id:this.id,count:this.selectedCount,selected:true,price:this.goodsinfo.sell_price})
            },
            beforeEnter(el) {
                //设置动画开始之前，设置小球的起始状态
                el.style.transform = "translate(0,0)";
            },
            enter(el, done) {
                //入场动画结束之后，小球的终止状态

                //transform：变换
                //transition：位移
                //translate：过度效果
                el.offsetWidth;

                //解决小球在页面滚动时的兼容性
                //动态获取小球的横纵坐标
                const ballPos = el.getBoundingClientRect();
                //动态获取导航上徽标的横纵坐标
                const badgePos = document.getElementById("badge").getBoundingClientRect();
                const left = badgePos.left-ballPos.left;
                const top = badgePos.top-ballPos.top;

                el.style.transform = "translate(" + left +"px, "+ top +"px)";
                el.style.transition = "all 1.5s cubic-bezier(.49,-0.41,.99,.51)"; // cubic-bezier 动画曲线路径
                done();
            },
            afterEnter(el) {
                //入场动画完成之后的回调函数
                this.flag = !this.flag;
            },
            getSelectCount(c){
                //获取选择商品的数量
                this.selectedCount = c
            }
        },
        props: ["id"],
        components: {
            swiper,
            nobox
        }
    }
</script>

<style scoped>
    .btnarea {
        flex-direction: column;
    }

    .btnarea mt-button {
        margin-top: 15px;
    }

    .mui-card-footer a {
        width: 100%;
    }

    .ball {
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        z-index: 999;
        left: 148px;
        top: 370px;

    }
</style>